<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>打印日志</title>
  <link rel="stylesheet" href="./element-ui/index.css" />
  <script src="./js/vue.min.js"></script>
  <script src="./element-ui/index.js"></script>
  <script src="./js/axios.js"></script>
  <style>
    .search-container {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
    }

    .el-form-item {
      display: inline-flex;
      margin-bottom: 8px;
    }

    .el-form--label-top .el-form-item__label {
      padding: 0;
    }

    .el-date-editor--datetimerange {
      width: 334px !important;
    }

    .el-select {
      width: 160px !important;
    }

    .table {
      width: 100%;
      margin-bottom: 10px;
    }

    .el-table .el-table__cell {
      padding: 4px 0;
    }

    .el-table .el-button {
      padding: 4px 0;
    }
  </style>
</head>
<body>
  <div id="app">
    <el-form ref="formRef" :model="searchData" class="search-form" v-bind="searchOptions" items="">
      <div class="search-container">
        <template v-for="item in searchOptions.items">
          <div class="search-item">
            <el-form-item v-if="item.display !== false" :key="item.prop" :label="item.label" :prop="item.prop">
              <component v-if="item.optionIs" :is="item.is" v-model="searchData[item.prop]" v-bind="item.attrs"
                         v-on="item.event">
                <template v-for="option in item.options">
                  <component :is="item.optionIs" v-bind="option">
                    {{ option.content || option.label }}
                  </component>
                </template>
              </component>
              <component v-else :is="item.is" v-model="searchData[item.prop]" v-bind="item.attrs" v-on="item.event">
                {{ item.content }}
              </component>
            </el-form-item>
          </div>
        </template>
        <div class="search-btns">
          <el-button type="primary" :size="searchOptions.size" @click="fetchLogs">
            搜索
          </el-button>
          <el-button type="danger" :size="searchOptions.size" @click="clearLogs">
            清空
          </el-button>
        </div>
      </div>
    </el-form>

    <el-table v-bind="tableOptions" :data="logs" columns="" event="" v-on="tableOptions.event">
      <el-table-column v-for="column in tableOptions.columns" :key="column.prop" v-bind="column">
        <template v-if="column.prop === 'action'" #default="{row}">
          <el-button type="text" @click="handlePreview(row)">
            重打
          </el-button>
          <el-button type="text" @click="handlePreview(row)">
            预览
          </el-button>
        </template>

        <template v-else-if="column.prop === 'status'" #default="{row}">
          <el-tag v-if="row.status === 'success'" type="success">
            成功
          </el-tag>
          <el-tag v-if="row.status === 'waiting'" type="warning">
            等待
          </el-tag>
          <el-tag v-if="row.status === 'failed'" type="danger">
            失败
          </el-tag>
        </template>

      </el-table-column>
    </el-table>
    <div class="pagination">

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="tableOptions.currentPage" :page-size="tableOptions.pageSize"
                     layout="total, sizes,prev, pager, next" :total="tableOptions.total">
      </el-pagination>
    </div>

    <div>
      <el-dialog :visible.sync="previewVisible" :title="previewTitle" width="80%" height="90%">
        <div>
          选择打印机：<el-select v-model="previewPrinter" placeholder="请选择打印机" size="small">
            <el-option v-for="printer in printers" :key="printer.name" :label="printer.name"
                       :value="printer.name"></el-option>
          </el-select>
          <el-button type="primary" size="small" @click="fetchPrinters('fresh')">刷新打印机列表</el-button>
          <el-button type="primary" size="small" @click="handlePreview">打印</el-button>
        </div>
        <div>
          <iframe :src="previewUrl" frameborder="0" width="100%" height="600px"></iframe>
        </div>
      </el-dialog>
    </div>

  </div>

  <script>

    new Vue({
      el: "#app",
      data() {
        return {
          logs: [],
          previewVisible: false,
          previewUrl: "",
          previewTitle: "预览",
          previewPrinter: "",
          searchOptions: {
            size: "small",
            inline: true,
            spellcheck: false,
            labelPosition: "right",
            labelSuffix: "：",
            items: [
              {
                label: "时间",
                prop: "timestamp",
                is: "el-date-picker",
                attrs: {
                  type: "datetimerange",
                  rangeSeparator: "至",
                  startPlaceholder: "开始日期",
                  endPlaceholder: "结束日期",
                  valueFormat: "yyyy-MM-dd HH:mm:ss",
                },
              },
              {
                label: "状态",
                prop: "status",
                is: "el-select",
                optionIs: "el-option",
                attrs: {
                  placeholder: "请选择状态",
                  clearable: true,
                },
                options: [
                  {
                    label: "成功",
                    value: "success",
                  },
                  {
                    label: "等待",
                    value: "waiting",
                  },
                  {
                    label: "失败",
                    value: "failed",
                  },
                ],
              },
            ],
          },
          searchData: {
            timestamp: [],
            clientType: "",
            status: "",
          },
          sort: {
            prop: undefined,
            order: undefined,
          },
          tableOptions: {
            currentPage: 1,
            pageSize: 20,
            total: 0,
            height: "calc(100vh - 51px - 42px - 16px)",
            border: true,
            stripe: true,
            class: "table",
            event: {
              "sort-change": this.sortChange,
            },
            columns: [
              {
                label: "任务ID",
                prop: "id",
                width: "100px",
                align: "center",
              },
              {
                prop: "createTime",
                label: "时间",
                width: "160px",
                align: "center",
              },
              {
                prop: "templateName",
                label: "模板名称",
                width: "200px",
                align: "center",
              },
              {
                prop: "printerName",
                label: "打印机",
                align: "center",
                width: "200px",
              },
              {
                prop: "status",
                label: "状态",
                align: "center",
                width: "100px",
              },
              {
                prop: "errorMessage",
                label: "错误信息",
                // width: "100px",
              },
              {
                prop: "action",
                label: "操作",
                align: "center",
                width: "200px",
              },
            ],
          },
          printers: [],
        };
      },
      computed: {
        rePrintAble() {
          return "";
        },
      },
      created() {
        this.fetchLogs();
        this.fetchPrinters();
      },
      methods: {
        fetchPrinters(type = 'default') {
          axios.get('/printer/list').then(res => {
            console.log("res", res);
            this.printers = res.data.data;
            if (type === 'fresh') {
              alert("获取打印机成功");
            }
          });
        },
        /**
         * 请求打印日志
         */
        fetchLogs() {
          this.logs = [];
          this.tableOptions.total = 0;
          const searchData = _.cloneDeep(this.searchData);
          searchData.page = this.tableOptions.currentPage;
          searchData.pageSize = this.tableOptions.pageSize;
          axios.post('/printLog/list', searchData).then(res => {
            this.logs = res.data.data.list;
            this.tableOptions.currentPage = res.data.data.currentPage;
            this.tableOptions.total = res.data.data.total;
          });

        },
        sortChange({ order, prop }) {
          this.sort = {
            prop,
            order,
          };
          this.tableOptions.currentPage = 1;
          this.fetchLogs();
        },
        /**
         * 处理分页大小变化
         */
        handleSizeChange(pageSize) {
          this.tableOptions.pageSize = pageSize;
          this.fetchLogs();
        },
        /**
         * 处理分页页码变化
         */
        handleCurrentChange(currentPage) {
          this.tableOptions.currentPage = currentPage;
          this.fetchLogs();
        },
        /**
         * 清空日志
         */
        clearLogs() {
          this.$confirm("确定要清空日志吗？", "提示", {
            type: "warning",
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            center: true,
            showClose: false,
            closeOnClickModal: false,
            closeOnPressEscape: false,
          }).then(() => {

          });
        },
        /**
         * 处理重打
         */
        handleRePrint(row) {

        },
        /**
         * 处理预览
         */
        handlePreview(row) {
          console.log("row", row);
          this.previewVisible = true;
          this.previewUrl = "/html-print.html?id=" + row.id;
          this.previewTitle = `任务ID：【${row.id}】 | 模板名称：【${row.templateName}】`;
        },
      },
    });
  </script>
</body>
</html>